<template>
  <div id="storelist">
    <div class="guesslist">
      <div class="title">猜你喜欢</div>
      <div class="findlist">
        <div class="find">
          <span
            :class="{ active: nowindex == index }"
            @click="option(index)"
            v-for="(item, index) in findlist"
            :key="index"
            >{{ item.option }}</span
          >
        </div>
        <div class="blockage">
          <div class="itm">年货节热卖</div>
          <div class="itm">津贴联盟</div>
          <div class="itm">满减优惠</div>
          <div class="itm">品质联盟</div>
        </div>
      </div>
    </div>
    <div
      @click="goshop(item.mtWmPoiId)"
      class="store"
      v-for="(item, index) in shoplist"
      :key="index"
    >
      <div class="img-box">
        <img :src="item.picUrl" alt="" />
      </div>
      <div class="text">
        <div class="name">{{ item.name }}</div>
        <div class="sales">{{ item.monthSalesTip }}</div>
        <p>起送20远距离配送￥3</p>
        <div class="space">{{ item.distance }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { shop_list } from "../../api/index.js";
import { ref,onMounted } from "vue";

      var nowindex= ref(0);
      var findlist =ref(
        [
          {
            option: "综合排序∨",
          },
          {
            option: "距离最近",
          },
          {
            option: "销量最高",
          },
          {
            option: "筛选▽",
          },
        ],
      ) ;
      var shoplist = ref([]);
   
    var option = (index) =>{
      nowindex = index;
      if (index == 1) {
        shoplist.value.sort((a, b) => {
          return parseInt(a.distance) - parseInt(b.distance);
        });
      } else if (index == 2) {
        shoplist.value.sort((a, b) => {
          return (
            parseInt(b.monthSalesTip.substr(2)) -
            parseInt(a.monthSalesTip.substr(2))
          );
        });
      } else if (index == 0) {
        shop_list().then((res) => {
          shoplist.value = res.data.list;
        });
      }
    }
    // var goshop = (id)=>{
    //   this.$router.push({path:'/shop/'+id})
    // }
    onMounted(()=>{

      shop_list().then((res) => {
        shoplist.value = res.data.list;
      });
    })

</script>

<style scoped>
#storelist {
  margin: 10px;
}
#storelist .guesslist .title {
  font-weight: 700;
}
#storelist .guesslist .find {
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
}
#storelist .guesslist .find > span.active {
  color: rgb(43, 163, 237);
}
#storelist .guesslist .blockage {
  line-height: 40px;
  display: flex;
  justify-content: space-around;
  font-size: 14px;
}
#storelist .guesslist .blockage .itm {
  background-color: rgb(239, 237, 237);
  height: 25px;
  line-height: 25px;
  margin: 1px;
  padding: 5px 8px;
}
#storelist .store {
  display: flex;
  height: 100px;
  margin: 20px 0;
  border-radius: 5px;
}
#storelist .store .img-box {
  width: 80px;
  margin-right: 10px;
}
#storelist .store .img-box img {
  width: 100%;
}
#storelist .store .text {
  flex: 1;
}
#storelist .store .text .name {
  font-weight: 700;
}
#storelist .store .text .sales,
#storelist .store .text .space,
#storelist .store .text p {
  line-height: 30px;
  font-size: 14px;
}
#storelist .store .text .space {
  float: right;
}
</style>